<template>
  <div>
    <h1>iviewui Switch 按钮互斥</h1>
    <Table :columns="columns"
           :data="data"
           stripe></Table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          id: 1,
          show: 1,
          off: '',
          on: ''
        },
        {
          id: 2,
          show: 0,
          off: '',
          on: ''
        }
      ],
      columns: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: '状态1',
          render: (h, params) => {
            return h('i-switch', {
              props: {
                size: 'large',
                value: params.row.off,
                'before-change': () => {
                  return this.switchChange(params.row, 'off')
                }
              },
              scopedSlots: {
                open: () => h('span', '开启'),
                close: () => h('span', '关闭')
              },
              on: {
                // 状态改变事件
                'on-change': (value) => {
                  params.row.off = value
                }
              }
            })
          }

        },
        {
          title: '状态2',
          render: (h, params) => {
            return h('i-switch', {
              props: {
                size: 'large',
                value: params.row.on,
                'before-change': () => {
                  return this.switchChange(params.row, 'on')
                }
              },
              scopedSlots: {
                open: () => h('span', '开启'),
                close: () => h('span', '关闭')
              },
              on: {
                'on-change': (value) => {
                  params.row.on = value
                }
              }
            })
          }

        }
      ]
    }
  },
  methods: {
    switchChange (row, type) {
      debugger
      if (type === 'off') {
        return new Promise((resolve) => {
          if (!row.on) {
            resolve()
          }
        })
      } else {
        return new Promise((resolve) => {
          if (!row.off) {
            resolve()
          }
        })
      }
    }
  }
}
</script>
